<!--
* @description 参数1
* @fileName 07.循环遍历
* @author userName
* @date 2024-01-22 13:43:45
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07.循环遍历</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <link rel="stylesheet" href="bootstrap-4.5.3/css/bootstrap.css" />
</head>

<body>
    <div id="app">
        <label>
            学生编号：
            <input v-model="stu.id" type="text">
        </label><br>
        <label>
            学生姓名：
            <input v-model="stu.name" type="text">
        </label><br>
        <label>
            学生年龄：
            <input v-model="stu.age" type="text">
        </label><br>
        <button @click="handlerAddStu" class="btn btn-primary  btn-sm ">新增</button>
        <input v-model="search.name" type="text">
        <input v-model.number="search.min" type="text">
        <input v-model.number="search.max" type="text">
        <button @click="handlerSearchStu" class="btn btn-primary  btn-sm ">检索</button>
        <table class="table">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>序号</th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- {{each stus as stu index}} -->
            <tbody>
                <template v-if="stus.length > 0">
                    <!-- key 表示 虚拟dom 和 真实dom的比对规则  默认的规则索引
                          但是不建议使用 最好使用对象的唯一标识
                    -->
                    <tr v-for="(stu,index) in stus" :key="stu.id">
                        <td><input type="checkbox">    </td>
                    
                        <td>{{index+1}}</td>
                        <td>{{stu.id}}</td>
                        <td>{{stu.name}}</td>
                        <td>{{stu.age}}</td>
                        <td><button class="btn btn-sm btn-danger" @click="handlerDel(stu.id,stu.name)">删除</button></td>
                    </tr>
                </template>
                <tr v-else>
                    <td colspan="5" align="center">暂无数据</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var vm = new Vue({
            data: {
                stus: [{
                        id: 1001,
                        name: "小明",
                        age: 18
                    },
                    {
                        id: 1002,
                        name: "小红",
                        age: 19
                    },
                    {
                        id: 1003,
                        name: "韩梅",
                        age: 17
                    },
                    {
                        id: 1004,
                        name: "吉姆",
                        age: 16
                    }
                ],
                stu: {
                    id: "",
                    name: "",
                    age: "",
                },
                search: {
                    name: "",
                    max: "",
                    min: ""
                }
            },
            methods: {
                handlerAddStu() {
                    const {
                        stu,
                        stus
                    } = this;
                    if (stus.some(s => s.id == stu.id)) {
                        alert(`编号${stu.id}已经存在!`);
                        return;
                    }
                    // this.stus.push(stu);
                    // 向后追加
                   // this.stus = [...this.stus,stu]
                    // 向前添加
                   this.stus = [stu,...this.stus]
                    this.stu = {
                        id: "",
                        name: "",
                        age: ""
                    }

                },
                handlerDel(id, name) {
                    const {
                        stus
                    } = this;
                    // console.log(id,name);
                    const b = confirm(`是否确认删除学生${name}`)
                    if (b) {
                        const index = stus.findIndex(stu => stu.id == id)

                        this.stus.splice(index, 1)
                    } else {
                        alert("取消删除!")
                    }
                },
                handlerSearchStu() {
                    const {
                        search: {
                            name,
                            max,
                            min
                        }
                    } = this;
                
                    if (name) {
                   
                     
                        this.stus = this.stus.filter(stu => stu.name.includes(name));

                    }
                    if (min && min>= 0) {
                        this.stus = this.stus.filter(stu => stu.age>=min);

                    }
                    if (max && max>=0) {
                        this.stus = this.stus.filter(stu => stu.age<=max);
                    }

                }
            }
        });
        vm.$mount("#app")
    </script>
</body>

</html>